<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 15px">
      <el-col :span="6">
        <div class="grid-content bg-purple">【题型】:{{ questionsType }}题</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【编号】:{{ contant.id }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【难度】:{{ difficulty }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【标签】:{{ contant.tags }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 15px">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【学科】:{{ contant.subjectName }}
        </div>
      </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【目录】:{{ contant.directoryName }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【方向】:{{ contant.direction }}
        </div>
      </el-col>
    </el-row>
    <hr />
    <el-row>【题干】:</el-row>
    <el-row>
      <el-button type="text" v-html="contant.question"></el-button>
    </el-row>
    <el-row v-if="questionsType === '单选' || questionsType === '多选'">
      <span>{{ questionsType }}题 选项: (以下选中的选项为正确答案)</span>
    </el-row>
    <template v-if="questionsType === '单选'">
      <el-radio-group v-model="radio">
        <div
          v-for="(item, index) in contant.options"
          :key="index"
          style="margin: 15px 0"
        >
          <el-radio :label="item.id">{{ item.title }}</el-radio>
        </div>
      </el-radio-group>
    </template>
    <template v-if="questionsType === '多选'">
      <el-checkbox-group v-model="checkList">
        <div
          v-for="(item, index) in contant.options"
          :key="index"
          style="margin: 7px 0"
        >
          <el-checkbox :label="item.title">{{ item.title }}</el-checkbox>
        </div>
      </el-checkbox-group>
    </template>
    <hr />
    <el-row>
      <span
        >【参考答案】:
        <el-button type="danger" size="small" @click="isShow = true"
          >视频答案预览</el-button
        >
      </span>
    </el-row>
    <el-row v-if="isShow">
      <video style="width:250px;height:200px"  controls src="@/assets/3a8899ddaf36b2fe4ff52f2280e4bc79.mp4"></video>
    </el-row>
    <hr />
    <el-row style="margin: 20px 0">
      <span>【答案解析】:{{contant.}}</span>
    </el-row>
    <hr />
    <el-row style="margin: 20px 0">
      <span>【题目备注】:https://cn.vuejs.org/有答案</span>
    </el-row>
    <el-row style="margin-top: 20px" type="flex" justify="center" size="small">
      <el-button type="primary" @click="$emit('close', false)">关闭</el-button>
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsPreview',
  props: {},
  components: {},
  data () {
    return {
      contant: {},
      questionsType: '',
      difficulty: '',
      radio: 1,
      checkList: [],
      isShow: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    async getData (id) {
      // console.log(id)
      const { data } = await detail({ id })
      // console.log(data)
      this.contant = data
      const f = questionType.find(t => t.value === Number(this.contant.questionType))
      // console.log(f)
      this.questionsType = f.label
      const o = difficulty.find(v => v.value === Number(this.contant.difficulty))
      this.difficulty = o.label
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
/deep/ .el-button--medium p {
  margin: 0;
}
</style>
